/**
 * Created by YAAP on 2017/8/3.
 */
define(function () {
    var template=
        `
        <div style="display:inline">
        <button @click="batchCreateHsNum= true">批量生成房号</button>
        <Modal
                v-model="batchCreateHsNum"
                title="批量生成房号【海南大厦】"
                width="934"
                class-name="batchCreateHsNum"
        >
            <div class="batchCreateHsNum-box">
                <div class="table-wrap clearfix">
                    <table class="table-wrap-content" border="0">
                        <tr>
                            <th>小区名称</th>
                            <th>楼栋座</th>
                            <th>单元数</th>
                            <th>楼层数</th>
                            <th>房号规则</th>
                        </tr>
                        <tr>
                            <td>冠永凤凰城</td>
                            <td>A8</td>
                            <td>2</td>
                            <td>18</td>
                            <td>平层号</td>
                        </tr>
                    </table>

                    <div class="table-rule">
                        <p class="rule-top">1单元以后0个房号</p>

                        <p class="rule-btm">
                            <Checkbox></Checkbox>
                            <span>负号=B</span>
                            <i></i>
                            <Checkbox></Checkbox>
                            <span>4=3A</span>
                        </p>
                    </div>
                </div>
                <!-- tab栏内容-->
                <div class="houseNumTabBox">
                    <div class="houseNumTab">
                        <Tabs :animated="false">
                            <Tab-pane label="房号参数">
                                <div class="houseNumTab-Param">
                                    <div class="param-left">
                                        <div class="param-left-head">
                                            <span>1单元平层号</span>
                                            <input type="text"/>
                                            <i>-</i>
                                            <input type="text"/>
                                            <em>刷新</em>
                                        </div>
                                        <div class="param-left-body">
                                            <table class="table-wrap-content"
                                                   border="0">
                                                <tr>
                                                    <th>勾选</th>
                                                    <th>总层数</th>
                                                </tr>
                                                <tr v-for="item in floorNum">
                                                    <td>
                                                        <Checkbox></Checkbox>
                                                    </td>
                                                    <td>{{item.num}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="param-right">
                                        <div class="param-left-head">
                                            <span>楼层号</span>
                                            <input type="text"/>
                                            <i>-</i>
                                            <input type="text"/>
                                            <em>刷新</em>
                                        </div>
                                        <div class="param-right-body">
                                            <table class="table-wrap-content"
                                                   border="0">
                                                <tr>
                                                    <th>勾选</th>
                                                    <th>平层号</th>
                                                    <th>户型</th>
                                                    <th>建筑面积</th>
                                                    <th>套内面积</th>
                                                    <th>朝向</th>
                                                </tr>
                                                <tr v-for="item in unitOrtList">
                                                    <td>
                                                        <Checkbox
                                                                v-model="item.checkBox"></Checkbox>
                                                    </td>
                                                    <td>{{item.bedNum}}</td>
                                                    <td>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                    </td>
                                                    <td>
                                                        <input type="text"
                                                               class="area"/>
                                                    </td>
                                                    <td>
                                                        <input type="text"
                                                               class="area"/>
                                                    </td>
                                                    <td>
                                                        <Select v-model="item.a2">
                                                            <Option v-for="item in ortModelList"
                                                                    :value="item.value"
                                                                    :key="item">{{
                                                                item.label }}
                                                            </Option>
                                                        </Select>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="param-left-head">
                                            <span>2单元平层号</span>
                                            <input type="text"/>
                                            <i>-</i>
                                            <input type="text"/>
                                            <em>刷新</em>
                                        </div>
                                        <div class="param-right-body">
                                            <table class="table-wrap-content"
                                                   border="0">
                                                <tr>
                                                    <th>勾选</th>
                                                    <th>平层号</th>
                                                    <th>户型</th>
                                                    <th>建筑面积</th>
                                                    <th>套内面积</th>
                                                    <th>朝向</th>
                                                </tr>
                                                <tr v-for="item in unitOrtList2">
                                                    <td>
                                                        <Checkbox
                                                                v-model="item.checkBox"></Checkbox>
                                                    </td>
                                                    <td>{{item.bedNum}}</td>
                                                    <td>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                        <input type="text"
                                                               class="houseType"/>
                                                    </td>
                                                    <td>
                                                        <input type="text"
                                                               class="area"/>
                                                    </td>
                                                    <td>
                                                        <input type="text"
                                                               class="area"/>
                                                    </td>
                                                    <td>
                                                        <Select v-model="item.a2">
                                                            <Option v-for="item in ortModelList"
                                                                    :value="item.value"
                                                                    :key="item">{{
                                                                item.label }}
                                                            </Option>
                                                        </Select>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </Tab-pane>
                            <Tab-pane label="房号列表预览">
                                <div class="houseNumTab-preview tablePreList">
                                    <div class="table-wrap">
                                        <table class="table-wrap-content" border="0">
                                            <tr>
                                                <th>勾选</th>
                                                <th>小区名称</th>
                                                <th>楼栋座</th>
                                                <th>单元</th>
                                                <th>楼层</th>
                                                <th>房号</th>
                                                <th>
                                                    <span>房</span><span>厅</span><span>卫</span><span>阳</span>
                                                </th>
                                                <th>建筑面积</th>
                                                <th>套内面积</th>
                                                <th>朝向</th>
                                            </tr>
                                            <tr v-for="item in showTableDta">
                                                <td>
                                                    <Checkbox></Checkbox>
                                                </td>
                                                <td>{{item.name}}</td>
                                                <td>{{item.num1}}</td>
                                                <td>{{item.num2}}</td>
                                                <td>{{item.num3}}</td>
                                                <td :class="{ classActive: item.isActive }">
                                                    {{item.num4}}
                                                </td>
                                                <td>{{item.num5}}</td>
                                                <td>{{item.num6}}</td>
                                                <td>{{item.num7}}</td>
                                                <td>{{item.num8}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="btmExplain">
                                    <div class="btmExplain-left left">
                                        <Checkbox></Checkbox>
                                        <span class="mr50">全选</span>
                                        <Checkbox></Checkbox>
                                        <span>仅显示选择房间</span>
                                    </div>
                                    <div class="btmExplain-right right">
                                        <p>【红色字体：表示和已有房号重复】</p>
                                    </div>

                                </div>
                            </Tab-pane>
                            <Tab-pane label="已有房间列表">
                                <div class="houseNumTab-list tablePreList">
                                    <div class="table-wrap">
                                        <table class="table-wrap-content" border="0">
                                            <tr>
                                                <th>勾选</th>
                                                <th>小区名称</th>
                                                <th>楼栋座</th>
                                                <th>单元</th>
                                                <th>楼层</th>
                                                <th>房号</th>
                                                <th>
                                                    <span>房</span><span>厅</span><span>卫</span><span>阳</span>
                                                </th>
                                                <th>建筑面积</th>
                                                <th>套内面积</th>
                                                <th>朝向</th>
                                            </tr>
                                            <tr v-for="item in showTableDta">
                                                <td>
                                                    <Checkbox></Checkbox>
                                                </td>
                                                <td>{{item.name}}</td>
                                                <td>{{item.num1}}</td>
                                                <td>{{item.num2}}</td>
                                                <td>{{item.num3}}</td>
                                                <td :class="{ classActive: item.isActive }">
                                                    {{item.num4}}
                                                </td>
                                                <td>{{item.num5}}</td>
                                                <td>{{item.num6}}</td>
                                                <td>{{item.num7}}</td>
                                                <td>{{item.num8}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="btmExplain">
                                    <div class="btmExplain-left left">
                                        <Checkbox></Checkbox>
                                        <span class="mr50">全选</span>
                                        <Checkbox></Checkbox>
                                        <span>仅显示选择房间</span>
                                    </div>
                                    <div class="btmExplain-right right">
                                        <p>【红色字体：表示和已有房号重复】</p>
                                    </div>

                                </div>
                            </Tab-pane>
                        </Tabs>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <p class="left">【共 <span>108</span> 个房间 和已有重复 <span>0</span> 个房号 以选中
                    <span>64</span> 个房号】</p>
                <Button type="button">预览</Button>
                <Button type="button">查看</Button>
                <Button type="button">批量生成房号</Button>
                <Button type="button">取消</Button>
            </div>
        </Modal>
        </div>`
    var BatchHouse={
        name:"batch-house",
        data:function()
        {

            return {
                showTableDta:[],
                ortModelList:[],
                floorNum:[],
                unitOrtList:[],
                unitOrtList2:[],
                batchCreateHsNum:0
            }
        },
        template:template

    }
    return BatchHouse
})
